.SocialIndexRecommend{
   width:240px;
   background:#fff;
   top:230px;
   padding:15px 19px;
   margin-bottom: 20px;
   transition: all .3s linear;
   -ms-transition: all .3s linear;
   -moz-transition: all .3s linear;
   -webkit-transition: all .3s linear;
   .MoudleHd{
      a{
         background:url(../../images/icon2.png) no-repeat right 6px;
         &:hover{
            color:#00aaff;
         }
      }
   }
   .RecommentList{
      width:100%;
      height:auto;
      ul{
         width:100%;
         height:100%;
         padding:30px 0 20px 0;
         li{
            height: 50px;
            width: 100%;
            margin-bottom: 15px;
            &:last-child{
               margin-bottom: 0;
            }
            .ListGameName{
               width:182px;
               height: 100%;
               img{
                  width:50px;
                  height: 50px;
                  border-radius: 5px;
                  margin-right:10px;
               }
            }
            .NameBox{
               width: 117px;
               .qzname{
                  display: inline-block;
                  height: 30px;
                  width: 100%;
                  text-align: left;
                  font-size: 14px;
                  color: rgb(88, 88, 88);
                  line-height: 2.2;
               }
               h6{
                  font-size: 12px;
                  color: #8c8c8c;
                  width: 117px;
                  height:20px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
               }
            }
            .ListGameBtn{
               width: 56px;
               height: 26px;
               margin-top:9px;
               a{
                  display: inline-block;
                  width:100%;
                  height: 100%;
                  font-size: 12px;
                  text-align: center;
                  line-height: 26px;
               }
               .R_nJoin{
                  color:rgb(88, 88, 88);
                  border: 1px solid rgb(234, 236, 239);
                  background-color: rgba(170, 178, 189, 0);
               }
               .R_Join{
                  color:#fff;
                  background:#00aaff;
                  img{
                     margin-right:3px;
                  }
               }
               .R_nJoin{
                 span:first-child{
                  display: inline-block;
                 }
                 span:last-child{
                  display: none;
                 }
                 &:hover{
                  span:first-child{
                    display: none;
                  }
                  span:last-child{
                    display: inline-block;
                  }
                 }
               }
            }
         }
      }
   }
}
@-webkit-keyframes mymove
{
from {top:0px;}
to {top:270px!important;}
}
@keyframes mymove
{
from {top:0px;}
to {top:270px!important;}
}
@-moz-keyframes mymove
{
from {top:0px;}
to {top:270px!important;}
}
.fixed3{
   position: fixed;
   top:270px;
   animation:mymove 2s normal;
   -webkit-animation:mymove 2s normal;
   -moz-animation:mymove 2s normal;
   -ms-animation:mymove 2s normal;
}